Home CSS Abas com CSS3 animadas
Abas com CSS3 animadas
CSS Luiz Augusto Vieira 06/02/2018
1° Passo:
/*reset*/
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
background: #eee;
font-family: Arial;
}
O código acima é apenas para resetar o nosso HTML, nada fora do normal.
2° Passo:
/*envolve todo o nosso conteúdo*/
.tab {
width: 700px;
margin: 50px auto;
}
Criamos a nossa classe ( .tab ) que vai envolver nosso conteúdo e setamos suas propriedades com seus valores.
3° Passo:
/*esconde o radio button*/
.tab input[type] {
display: none;
}
No código acima, escondemos o radio button ( .tab input[type] ), pois não queremos que os mesmos fiquem visível na tela.
4° Passo:
/*nossos próprios botões*/
.tab label {
display: block;
float: left;
padding: 12px 20px;
margin-right: 5px;
cursor: pointer;
transition: background-color .3s;
}
Acima está nossos próprios botões que substituem o radio button para o clique.
Não há nada de anormal, são códigos que usamos no dia a dia, com uma observação no ( transition: background-color .3s; ), servirá para dar um efeito fade ao passar o mouse sobre os botões quando invocarmos o Pseudo Classes ( :hover ).
5° Passo:
/*ataca o label com hover e o radio button checkado*/
.tab label:hover,
.tab input:checked + label {
background: #5b9780;
color: #fff;
}
No código acima, vamos atacar o Pseudo Classes ( :hover ) mudando as cores do ( Label ) conforme definimos.
6° Passo:
/*o conteúdo que mudar ao clicar nos boões*/
.tabs {
clear: both;
perspective: 400px;
-webkit-perspective: 400px;
}
Criamos nossa classe que vai envolver o conteúdo da abas. Não definimos largura e nem altura, apenas definimos as propriedades ( clear ) e a ( perspective ) e setamos o valor com 400px.
7° Passo:
/*aqui a nossa content*/
.tabs .content {
background: #fff;
width: 700px;
position: absolute;
border: 2px solid #5b9780;
padding: 10px 30px 40px;
line-height: 1.4em;
opacity: 0;
transform: rotateX(-20deg);
transform-origin: top center;
transition: opacity .3s, transform 1s;
z-index: 0;
}
Dentro da classe ( .tabs ) criamos a classe ( .content ) que envolve o conteúdo, ela que vai fazer a nossa animação ao clicar nos botões.
8° Passo:
/*aqui estão nosso links*/
#tab1:checked ~ .tabs .content:nth-of-type(1),
#tab2:checked ~ .tabs .content:nth-of-type(2),
#tab3:checked ~ .tabs .content:nth-of-type(3),
#tab4:checked ~ .tabs .content:nth-of-type(4) {
transform: rotateX(0);
opacity: 1;
z-index: 1;
}
No código acima é onde acontece a mágica ao clicar nos botões.
Ao clicar no botão atingimos a classe ( .tabs ) e a classe ( .content ) dentro dela e mostramos o conteúdo certo de acordo com Pseudo Classes ( :nth-of-type() ).
9° Passo:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Abas com CSS3 animada</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="tab">
<input type="radio" name="tabs" id="tab1" checked>
<label for="tab1">Home</label>
<input type="radio" name="tabs" id="tab2">
<label for="tab2">Sobre</label>
<input type="radio" name="tabs" id="tab3">
<label for="tab3">Notícias</label>
<input type="radio" name="tabs" id="tab4">
<label for="tab4">Contato</label>
<div class="tabs">
<div class="content">
<h2>HOME</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="content">
<h2>SOBRE</h2>
<p>Maecenas dictum, urna ut consequat condimentum...</p>
</div>
<div class="content">
<h2>NOTÍCIAS</h2>
<p>Duis luctus dolor ac erat luctus hendrerit...</p>
</div>
<div class="content">
<h2>CONTATO</h2>
<p>Fusce vel eros eu lectus ultricies...</p>
</div>
</div>
</div>
</body>
</html>
Acima está nosso HTML para o exemplo das abas.
Veja o resultado final:
ATÉ O PRÓXIMO POST
Sentiu falta de alguma coisa óbvia? Comente, dei sua opinião, ajude a divulgar o Blog.
Inscreva-se no Youtube: https://www.youtube.com/htmlecsspro
Curta nossa Fanpage: https://www.facebook.com/htmlecsspro
Entre para o nosso Grupo: https://www.facebook.com/groups/htmlecsspro
Olá, deixe seu comentário para Abas com CSS3 animadas
Uoxitu Siuva